<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	#cont {
		margin-top: 100px;
		width:400px;
		height:500px;
		border:1px solid yellow;
		position: relative;
	}
	#mail {
		width:400px;
		height:400px;
		border:1px solid red;
		position: relative;
		top:-100px;
	}

	.row {
		height:100px;
	}

	.row div {
		width:98px;
		height:98px;
		border:1px solid blue;
		float: left;
	}

	.black {
		background: black;
	}

	</style>
</head>
<body>
	<div id="cont">

	
	<div id="main">
		
	</div>
	</div>
</body>
<script>
function getStyle(el,attr){
	return el.currentStyle ? elcurrentStyle[attr]:getComputedStyle(el,null)[attr];
}
var main = document.getElementById('main');
function cDiv(className){
	var div = document.createElement('div');
	if(className){
		div.className = className;
	}
	return div;
}
function cRow(){
	var ind = Math.floor(Math.random()*4);
	var row = cDiv('row');
	for(var i=0;i<4;i++){
		if(i==ind){
		row.appendChild(cDiv('black'));
		} else {
			row.appendChild(cDiv());
		}
	}
	if(main.firstChild){
		main.insertBefore(row,main.firstChild);
	}else{
		main.appendChild(row);
	}
	
}
function move(){
	var top = getStyle(main,'top');
	top = parseInt(top);
	main.style.top = top + 2 + 'px'
	console.log(main.style.top);
}
function init(){
	for (var i=0;i<4;i++) {
		cRow();
	}
}

init();

window.setInterval('move()',40);

</script>
</html>